<template>
	<view class="label-container">
		<!-- 推荐商品模块 -->
		<view class="goods-section" v-if="recommended.length">
			<view class="goods-list">
				<!-- 商品项：绑定跳转方法，传入商品完整对象 -->
				<view class="goods-item" v-for="goods in recommended" :key="goods.goodsId"
					@click="goToGoodsDetail(goods)">
					<!-- 左侧图片 -->
					<image :src="handleImgURL(goods.goodsImg)" mode="aspectFill" class="goods-img"
						@error="goods.goodsImg = `${baseUrl}/static/images/default-goods.png`"></image>

					<!-- 右侧信息区（分层布局） -->
					<view class="goods-info">
						<!-- 商品名+随机时长（顶部行） -->
						<view class="top-row">
							<text class="goods-name">{{ goods.goodsName }}</text>
							<text class="time-tag">约{{ getRandomDeliveryTime() }}分钟送达</text>
						</view>

						<!-- 月售+随机配送费（中间行） -->
						<view class="middle-row">
							<text class="sales">月售 {{ goods.salesNum }}</text>
						</view>

						<!-- 价格区（底部行） -->
						<view class="price-row">
							<text class="current-price">¥{{ (goods.goodsPrice || 0).toFixed(0) }}</text>
							<text class="save-price" v-if="goods.originalPrice">
								省{{ (goods.originalPrice - goods.goodsPrice).toFixed(0) }}元
							</text>
							<text class="original-price" v-if="goods.originalPrice">
								¥{{ (goods.originalPrice || 0).toFixed(0) }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 无数据提示 -->
		<view class="empty-tip" v-else>暂无商品数据~</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/utils/config.js"
	export default {
		name: "HomeLabel",
		props: {
			recommended: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			handleImgURL(url) {
				return url?.includes("http") ? url : `${baseUrl}${url}`
			},
			// 随机生成送达时间（15-45分钟）
			getRandomDeliveryTime() {
				return Math.floor(Math.random() * 31) + 15
			},
			// 跳转到商品详情（与参考代码逻辑一致）
			goToGoodsDetail(goods) {
				// 已下架商品（isOnSale=0）提示不跳转
				if (goods.isOnSale === 0) {
					uni.showToast({
						title: '商品已下架',
						icon: 'none',
						duration: 1500,
						mask: true
					});
					return;
				}
				// 上架商品：保存浏览历史并跳转
				this.saveBrowseHistory(goods);
				uni.navigateTo({
					url: `/pages/goods/goodsDetail?goodsId=${goods.goodsId}`
				});
			},
			// 保存浏览记录到本地存储（复用参考代码逻辑）
			saveBrowseHistory(goods) {
				const historyItem = {
					goodsId: goods.goodsId,
					goodsName: goods.goodsName,
					goodsImg: this.handleImgURL(goods.goodsImg),
					goodsPrice: goods.goodsPrice,
					browseTime: Date.now(),
					// 若组件需传递店铺信息，可通过props接收storeId和storeName，此处暂用默认值
					storeId: goods.storeId || '',
					storeName: goods.storeName || '推荐商品'
				};

				let historyList = uni.getStorageSync('browseHistory') || [];
				// 去重：移除已存在的同商品记录
				historyList = historyList.filter(item => item.goodsId !== goods.goodsId);
				// 新增记录到顶部
				historyList.unshift(historyItem);

				// 限制历史记录最多100条
				if (historyList.length > 100) {
					historyList = historyList.slice(0, 100);
				}

				uni.setStorageSync('browseHistory', historyList);
			}
		}
	};
</script>

<style scoped>
	/* 容器：全局样式统一 */
	.label-container {
		width: 100%;
		padding: 0;
		margin: 0;
		background-color: #fff;
		/* 改为白色背景，适配极简风格 */
	}

	/* 商品区：弱化边框，增强呼吸感 */
	.goods-section {
		background: transparent;
		padding: 0;
	}

	/* 商品列表：紧凑排列 */
	.goods-list {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	/* 商品项：移除边框/阴影，改用底部分隔线 */
	.goods-item {
		display: flex;
		gap: 28rpx;
		padding: 26rpx 28rpx;
		background: #fff;
		transition: background 0.2s ease;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
		/* 底部分隔线替代边框 */
	}

	.goods-item:last-child {
		border-bottom: none;
		/* 最后一项去掉分隔线 */
	}

	.goods-item:hover {
		background: #fafafa;
	}

	/* 左侧图片：保持尺寸 */
	.goods-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
		object-fit: cover;
	}

	/* 信息区：分层布局 */
	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 10rpx;
	}

	/* 顶部行：商品名+配送时长 */
	.top-row {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		width: 100%;
	}

	.goods-name {
		font-size: 38rpx;
		color: #222;
		font-weight: 500;
	}

	.time-tag {
		font-size: 26rpx;
		color: #ff7d00;
		font-weight: 500;
	}

	/* 中间行：月售+配送费 */
	.middle-row {
		display: flex;
		gap: 28rpx;
		font-size: 26rpx;
		color: #888;
	}

	/* 价格区：视觉重点突出 */
	.price-row {
		display: flex;
		align-items: baseline;
		gap: 14rpx;
		font-size: 26rpx;
		color: #888;
	}

	.current-price {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff4400;
	}

	.save-price {
		color: #ff4400;
	}

	.original-price {
		text-decoration: line-through;
		font-size: 24rpx;
	}

	/* 无数据提示：居中弱化 */
	.empty-tip {
		text-align: center;
		font-size: 30rpx;
		color: #999;
		padding: 60rpx 0;
		width: 100%;
	}
</style>